var API = require('API');

module.exports = function () {
    return {
        restrict: 'E',
        scope   : {
            user: "="
        },
        template: '<div class="user-picker dropdown">'
                    + '<input class="user-picker-input"  ng-model="username">'
                    + '<div class="user-picker-menu dropdown-menu" >'
                        +'<div class="user-picker-item" ng-click="truncate()">[ X ]</div>'
                        + '<div class="user-picker-item" ng-repeat="u in data|orderBy:[\'name\']|filter:user_picker_filter" ng-click=\'submit(u)\'>{{u.name}}</div>'
                    + '</div>'
                + '</div>',
        replace   : true,
        controller: ['$scope', '$element', '$timeout', function ($scope, $element, $timeout) {
            $scope.data = [];

            var items = [];

            $scope.selected = -1;

            var reset_items = function () {
                $scope.selected = -1;
                items = $element.find('.user-picker-item').hover(function () {
                    items.removeClass('selected');
                    $(this).addClass('selected');
                }, function () {
                    $(this).removeClass('selected');
                });
            };

            var $input = $element.find('.user-picker-input');

            var i = 0;
            $input.keydown(function (e) {


                var keyCode = e.keyCode;
                if (keyCode == 38) { // down
                    $(items).removeClass('selected');
                    if ($scope.selected !== -1) {
                        $scope.selected--;
                    }
                    if ($scope.selected == -1) {
                        //clear all the style
                    } else {
                        $(items[$scope.selected]).addClass('selected');
                    }

                    if (i <= 30) {
                        i = 0;
                        $(".user-picker-menu").scrollTop(i);
                    }else{
                        i = i - 30;
                        $(".user-picker-menu").scrollTop(i);
                    }

                }
                else if (keyCode == 40) {//up
                    if ($scope.selected < items.length - 1) {
                        $scope.selected++;
                    }
                    $(items).removeClass('selected');
                    $(items[$scope.selected]).addClass('selected');


                    if ($scope.selected >= 3) {
                        if (i >= $(items).length*30 - 120) {
                            $(".user-picker-menu").scrollTop(i);
                        }else{
                            $(".user-picker-menu").scrollTop(i);
                            i = i + 30;
                        }
                    }

                }
                else if (keyCode == 13) {
                    //enter
                    if ($scope.selected > -1) {
                        $(items[$scope.selected]).trigger('click')
                    }
                    else {
                        //close the menu and leave the same
                        $scope.$apply(function () {
                            close_menu();
                        })
                    }
                }
                else if (keyCode == 27) {
                    $scope.$apply(function () {
                        close_menu();
                    })
                }
                else {
                    $scope.$apply(function () {
                        $timeout(function () {
                            reset_items();
                        });
                    });
                }
            });

            $input.focus(function () {
                API.user.brief(function (list) {
                    $scope.$apply(function () {
                        $scope.data = list;
                        $timeout(function () {
                            reset_items();
                            $input[0].focus();
                        });
                    });
                });
            });

            //选中
            $scope.submit = function (user) {
                $scope.user = user;
                $scope.username = user.name;
            };

            //清空事件
            $scope.truncate = function () {
                $scope.user = {};
                $scope.username = '';
            };
        }]
    }
};
// var API = require('API');
// var popup = '<div class="picker-item truncate-item" ng-click="truncate()">[ X ]</div>'
//     + '<div class="picker-item" ng-repeat="u in data|orderBy:[\'name\'] | filter:picker_filter" ng-click=\'submit(u)\'>{{u.name}}</div>';

// module.exports = function () {
//     return {
//         restrict: 'E',
//         scope   : {
//             user: "="
//         },
//         template: '<div class="picker-content">'
//         + '<div class="picker-input">'
//         + '<input class="display" ng-show="!show" value="{{user.name}}" title="{{user.name}}">'
//         + '<input class="input" ng-show="show" type="text" ng-model="picker_filter">'
//         + '</div>'
//         + '<div class="picker-menu" ng-show="show" style="z-index:1;">'
//         + popup
//         + '</div>'
//         + '</div>',

//         replace   : true,
//         controller: ['$scope', '$element', '$timeout', function ($scope, $element, $timeout) {
//             $scope.data = [];
//             $scope.show = false;
//             $scope.picker_filter = "";
//             var $overlay = $('<div/>').css({
//                 height    : '100%',
//                 width     : '100%',
//                 position  : 'fixed',
//                 top       : 0,
//                 left      : 0,
//                 background: "rgba(255,255,255,0.0)",
//                 "z-index" : "-1"
//             }).click(function () {
//                 $scope.$apply(function () {
//                     $scope.show = false;
//                     $overlay.detach();
//                 });
//             });

//             var close_menu = function () {
//                 $scope.show = false;
//                 $overlay.detach();
//             };

//             var items = [];

//             $scope.selected = -1;

//             var reset_items = function () {
//                 $scope.selected = -1;
//                 items = $element.find('.picker-item').hover(function () {
//                     items.removeClass('selected');
//                     $(this).addClass('selected');
//                 }, function () {
//                     $(this).removeClass('selected');
//                 });
//             };

//             var $input = $element.find('input.input');
//             var $display = $element.find('input.display');

//             var i = 0;
//             $input.keydown(function (e) {


//                 var keyCode = e.keyCode;
//                 if (keyCode == 38) { // down
//                     $(items).removeClass('selected');
//                     if ($scope.selected !== -1) {
//                         $scope.selected--;
//                     }
//                     if ($scope.selected == -1) {
//                         //clear all the style
//                     } else {
//                         $(items[$scope.selected]).addClass('selected');
//                     }

//                     if (i <= 30) {
//                         i = 0;
//                         $(".picker-menu").scrollTop(i);
//                     }else{
//                         i = i - 30;
//                         $(".picker-menu").scrollTop(i);
//                     }

//                 }
//                 else if (keyCode == 40) {//up
//                     if ($scope.selected < items.length - 1) {
//                         $scope.selected++;
//                     }
//                     $(items).removeClass('selected');
//                     $(items[$scope.selected]).addClass('selected');


//                     if ($scope.selected >= 3) {
//                         if (i >= $(items).length*30 - 120) {
//                             $(".picker-menu").scrollTop(i);
//                         }else{
//                             $(".picker-menu").scrollTop(i);
//                             i = i + 30;
//                         }
//                     }

//                 }
//                 else if (keyCode == 13) {
//                     //enter
//                     if ($scope.selected > -1) {
//                         $(items[$scope.selected]).trigger('click')
//                     }
//                     else {
//                         //close the menu and leave the same
//                         $scope.$apply(function () {
//                             close_menu();
//                         })
//                     }
//                 }
//                 else if (keyCode == 27) {
//                     $scope.$apply(function () {
//                         close_menu();
//                     })
//                 }
//                 else {
//                     $scope.$apply(function () {
//                         $timeout(function () {
//                             reset_items();
//                         });
//                     });
//                 }
//             });

//             $display.focus(function () {
//                 API.user.brief(function (list) {
//                     $scope.$apply(function () {
//                         $scope.data = list;
//                         $scope.show = true;
//                         $overlay.appendTo($element.find('.picker-menu'));
//                         $timeout(function () {
//                             reset_items();
//                             $input[0].focus();
//                         });
//                     });
//                 });
//             });

//             //选中
//             $scope.submit = function (user) {
//                 $scope.user = user;
//                 close_menu();
//             };

//             //清空事件
//             $scope.truncate = function () {
//                 $scope.user = {};
//                 close_menu();
//             };
//         }]
//     }
// };